iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
2
Modern Web

30天串接30個Google APIs的服務應用系列 第 7

[day7]-創造自己的地圖服務應用,Google Maps API抓取當前位置練習

  • 分享至 

  • xImage
  •  

結果假日天氣變好冷...頭痛荒廢了兩天...

長期用電腦的我們肩頸那邊的筋很僵硬,天氣突然變冷了連帶也會造成腦部疼痛.../images/emoticon/emoticon06.gif
記得要保暖好頭部和頸部,程式開發者辛苦了TAT (敬禮


抱歉星期六也就是昨天天氣變化太大身體不適,也就先卡文了...
昨天的文就改寫peter0521網友留言點播的Google Calendar API Sample練習好了...
因為我都是當日寫的沒有庫存文章...
擇日補上,非常抱歉.../images/emoticon/emoticon02.gif
今天緩一下來做地圖定位這塊的撰寫好了


起始式

Google Marker的應用尚未結束,還有很多Event沒有解說,請搬板凳慢慢等待...(被打/images/emoticon/emoticon05.gif
大家用Google Map最常的動作"之一",應該有定位目前的位置這個功能吧~

定位目前位置可以作很多的應用,舉凡購物時可以找尋你家附近的分店、或是你迷路時打開目前定位導航等....
那就不多說,附上參考資料

Maps JavaScript API - Geolocation

其實定位非常的簡單,原理是:

獲取設備當前的位置 -> 取得經緯度 -> 傳給Google Maps API

這箇中的奧妙就在獲取設備當前的位置是用Javascript提供的Web API來取得經緯度,而不是用Google提供的API來取得經緯度!
https://ithelp.ithome.com.tw/upload/images/20171210/20103130VIbf25gO7e.png

參考資料 - MDN開發者技術文件 Geolocation

解析一下Google的Sample
https://ithelp.ithome.com.tw/upload/images/20171210/20103130NvmGrocxoQ.png

navigator.geolocation會回傳一個 Geolocation 物件,透過這個物件可以存取Device的位置資訊。
但是因為有隱私的因素在,會先詢問User是否允許授權!(重要)

[ 這邊有我今年自己的做的side project來做截圖範例 ]
跳"是否允許授權"↓
https://ithelp.ithome.com.tw/upload/images/20171210/20103130bg20fp2H9a.png

允許授權後↓
https://ithelp.ithome.com.tw/upload/images/20171210/201031308a9C0ljEto.png

大致上該注意的就這些了~(欸?就醬?


練習Time

所以練習寫顯示目前位置的地圖~
https://media.giphy.com/media/l1Kdavz0fSoaJOZNK/giphy.gif
giphy大圖連結 http://gph.is/2jhOjZf

趕快在deadline前斷尾(逃....


附上完整程式碼

Demo連結:https://tinatyc.github.io/King-Ironman-30Day-Challenge/page/day7/

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>King Tzeng的鐵人地圖</title>
    <style type="text/css" media="screen">
    html {
        height: 100%;
        width: 100%;
        background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    }

    #map {
        position: absolute;
        left: 0;
        height: 80%;
        width: 100vw;
    }

    #body {
        height: 100%;
        width: 100vw;
        position: relative;
        top: 0;
        left: 0;
    }

    h1,
    h2 {
        text-align: center;
    }

    h2 {
        width: 100%;
        background-color: rgba(255, 255, 255, 0.45);
    }
    </style>
</head>

<body>
    <div class="body">
        <h1>King Tzeng的鐵人地圖</h1>
        <h2>抓取當前位置的練習</h2>
        <div id="map"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    function initMap() {
        var latlng = { lat: 25.046891, lng: 121.516602 }; // 給一個初始位置
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14, //放大的倍率
            center: latlng //初始化的地圖中心位置
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var marker = new google.maps.Marker({
                    position: pos,
                    icon:'marker.png',
                    map: map
                });
                map.setZoom(17);
                map.setCenter(pos);
            });
        } else {
            // Browser doesn't support Geolocation
            alert("未允許或遭遇錯誤!");
        }
    } //init_end
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_Za7RqKvUuEg2Nln0EcpUVN3k2fZtDuE&callback=initMap">
    </script>
</body>

</html>



文後-

為啥我的GIF一直弄不好/images/emoticon/emoticon20.gif

實作Demo目錄 on GitHub
同步刊登於King 學習前端之人生
[ 著作權為King Tzeng所有,請勿抄襲或致敬=口=]


上一篇
[day6]-(預留)(待補)網友點播Google Calendar API的 Sample練習
下一篇
[day8]-離開不是結束,這裡不是終點....(退賽宣言 T_T)
系列文
30天串接30個Google APIs的服務應用8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Howard
iT邦新手 4 級 ‧ 2017-12-10 22:27:14

gif 遇到什麼困難了嗎?

想問一下大大用的是哪一套軟體?
因為看大大的文可以弄到gif滿版,我試過傳到github上又太慢...TAT
現在用的是GIPHY CAPTURE這個,有點像傳到圖床這樣....

Howard iT邦新手 4 級 ‧ 2017-12-10 22:49:31 檢舉

我之前也是用這一套耶....
可是不知道為什麼都錄起來都是黑屏/images/emoticon/emoticon04.gif
所以就換成剛剛我說的那一套了..../images/emoticon/emoticon02.gif

0
harvey11
iT邦新手 5 級 ‧ 2018-07-23 20:28:41

大大您好,請問網頁用phonegap包成app在手機測試後,發現不會詢問使用者是否同意取得位置(意同沒有定位功能了),想請問是什麼原因呢?

你好:以我的印象好像是要在config.xml那邊作設定,然後要安裝白名單和安裝Geolocation的plugin的設定,給你幾個關鍵字搜尋看看,不好意思不知道有沒有解答到你問題> <
PS:我設定這個已經時代久遠了....只能靠印象了.../images/emoticon/emoticon02.gif

//Geolocation
    <plugin name="cordova-plugin-geolocation" spec="~2.4.3">
        <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="" />
    </plugin>

//白名單
    <plugin name="cordova-plugin-whitelist" spec="1" />
//相關config設定
    <allow-intent href="geo:*" />
    <access origin="http://*.google.com" />
    <access origin="http://google.com" />
    <access origin="https://google.com" />
    <access origin="http://maps.google.com" />
0
harvey11
iT邦新手 5 級 ‧ 2018-07-24 15:45:37

請問您說的安裝是指在config檔裡加入那些指令嗎?

plugin類的需要下指令安裝,其他的加入就好囉~

0
harvey11
iT邦新手 5 級 ‧ 2018-07-24 15:53:46

大大我照你的方法成功了!!!!!!真的很感謝你!!!!

不會喔~是你自己努力的XD 有成功就好了/images/emoticon/emoticon42.gif

0
jerry168
iT邦新手 5 級 ‧ 2019-10-23 12:19:14

請問樓主
我看了您文章 也要來試試 google map api

請問 我如果功能是 將 資料庫內 資料表:學生 透出每一個學生 記錄的「地址」 上 在google map 上標記出來

那是否 也可以用 javascript Geo api 去 根據「地址」來獲得每一個的 經緯度呢?

謝謝您的幫忙 ^^

最後我有點 進去 您附上的 「範例連結」ex: https://tinatyc.github.io/King-Ironman-30Day-Challenge/page/day7/

但顯示都有問題,是否是因為 google api 開始收費的關係呢?

您好~
對的,Geocoding Service可以用地址來找到經緯度~
我找到這個希望對您有幫助
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/geocoding-simple

關於那個範例應該是太久沒更新了,可能api安全規則要在設定一下XD

我要留言

立即登入留言